import React, {Component, useEffect, useState,useImperativeHandle,forwardRef} from "react"

import { List, Avatar ,Table, Tag, Space,Modal,Button,
    Form, Input, Row ,Col, Checkbox ,Tabs, Typography, Divider,Transfer} from 'antd';
import { SwapRightOutlined,SwapLeftOutlined  } from '@ant-design/icons';
import {getProcessInstancesByUserId} from "../api/workflow";
import {getMembersByDimId}  from '../api/dim'
import './MultiChoice.css'
const  MultiChoice = (props,ref) => {
    const  [checkboxItems, setCheckboxItems] =useState([]);
    const  [checkedItems, setCheckedItems] =  useState([]);
    //const  [seleectededDim, setSeleectedDim] =  useState(seleectedDim);
    const [targetKeys, setTargetKeys] = useState([]);
    const [selectedKeys, setSelectedKeys] = useState([]);
    useEffect(()=>{

        if(props.seleectedDim!=undefined  && props.seleectedDim!=null){
            getMembersByDimId(props.seleectedDim).then(
                (res) => {
                    setCheckboxItems(res.data);
                    setCheckedItems([]);
                },
                (error) => {
                    console.log("get response failed!");
                }
            );
        }

    },[props.seleectedDim])


    // 可以让父组件调用子组件的方法
    useImperativeHandle(ref, () => ({
        getSelectedMember () {
            console.log("===============targetKeys:================");
            console.log(targetKeys);
            let  r=[];
            if (targetKeys!=undefined && targetKeys.length>0){
                targetKeys.map(i=>{
                    let _o=checkboxItems.filter(item=>{
                        return item.id==i
                        }
                    );

                    if(_o!=undefined){
                        console.log(_o);

                        r.push(_o[0])
                    } ;
                })
            }
            console.log("===============r[targetKeys]:================");
            console.log(r);
            return r;
           // return checkedItems;
        }
    }));

    /**
     * 点击左边列表的时候
     * @param index
     */
    const getVal = (index) => {
        //let items = [...this.state.checkboxItems];
        let items = [...checkboxItems];
        items[index].checked = !items[index].checked;
        // this.setState({
        //     checkboxItems: items
        // })
        setCheckboxItems(items);
    }

    const leftItemClick = (index) => {
        //let items = [...this.state.checkboxItems];
        let items = [...checkboxItems];
        items[index].checked = !items[index].checked;
        setCheckboxItems(items);
        // this.setState({
        //     checkboxItems: items
        // })

    }

    const rightItemClick = (index) => {
        //let items = [...this.state.checkedItems];
        let items = [...checkedItems];
        items[index].checked = !items[index].checked;
        // this.setState({
        //     checkedItems: items
        // })
        setCheckedItems(items);
    }

    const getSelected = (index) => {
        //let items = [...this.state.checkedItems];
        let items = [...checkedItems];
        items[index].checked = !items[index].checked;
        // this.setState({
        //     checkedItems: items
        // })
        setCheckedItems(items);
    }

    const leftMove = () => {
        // let items = [...this.state.checkboxItems];
        // let selectedItems = [...this.state.checkedItems];
        let items = [...checkboxItems];
        let selectedItems = [...checkedItems];
        let notSelect = [];
        items.map(item => {
            if (item.checked === true) {
                item.checked = false;
                return selectedItems.push(item);
            }
            else {
                return notSelect.push(item);
            }
        })

        // this.setState({
        //     checkedItems: selectedItems,
        //     checkboxItems: notSelect,
        // })
        setCheckboxItems(notSelect);
        setCheckedItems(selectedItems);
    }

    const rightMove = () => {
        // let items = [...this.state.checkboxItems];
        // let selectedItems = [...this.state.checkedItems];
        let items = [...checkboxItems];
        let selectedItems = [...checkedItems];
        let notSelect = [];
        selectedItems.map(item => {
            if (item.checked === true) {
                item.checked = false;
                return items.push(item);
            }
            else {
                return notSelect.push(item);
            }
        })

        // this.setState({
        //     checkedItems: notSelect,
        //     checkboxItems: items,
        // })
        setCheckboxItems(items);
        setCheckedItems(notSelect);
    }

    const OpBtn={
        display: "flex",
    };
    const  middle_convert = {
        flex: 1,
        // display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
    };

    const demo_infinite_container={
        height: "300px",
    padding: "8px 24px",
    overflow: "auto",
    border: "1px solid #e8e8e8",
    }



    const onChange = (nextTargetKeys, direction, moveKeys) => {
        console.log('targetKeys:', nextTargetKeys);
        console.log('direction:', direction);
        console.log('moveKeys:', moveKeys);
        setTargetKeys(nextTargetKeys);
    };

    const onSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
        console.log('sourceSelectedKeys:', sourceSelectedKeys);
        console.log('targetSelectedKeys:', targetSelectedKeys);
        setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
    };

    const onScroll = (direction, e) => {
        console.log('direction:', direction);
        console.log('target:', e.target);
    };


        return (
            <>

                <Transfer
                    dataSource={checkboxItems}
                    titles={['Source', 'Target']}
                    listStyle={{
                        width: 600,
                        height: 300,
                    }}

                    targetKeys={targetKeys}
                    selectedKeys={selectedKeys}
                    onChange={onChange}
                    onSelectChange={onSelectChange}
                    onScroll={onScroll}
                    render={item => item.formatMember}
                />




            {/*<Row>*/}
                {/*<Col span={10}>*/}
                    {/*<div className="demo-infinite-container">*/}
                        {/*<ul className="left-selected">*/}
                            {/*{*/}
                                {/*checkboxItems.map((ele, index) => {*/}
                                    {/*return (*/}
                                        {/*<li key={index} id={"item" + index} onClick={() => leftItemClick(index)}*/}
                                            {/*className={ele.checked ? "item active" : "item"}>*/}
                                            {/*<input type="checkbox" name="items" checked={ele.checked}*/}
                                                   {/*onChange={() => getVal(index)}/>*/}
                                            {/*<label>{ele.formatMember}</label>*/}
                                        {/*</li>*/}
                                    {/*)*/}
                                {/*})*/}
                            {/*}*/}
                        {/*</ul>*/}
                    {/*</div>*/}
                {/*</Col>*/}
                {/*<Col span={4}>*/}
                    {/*<Divider/>*/}
                    {/*<Row justify="center">*/}
                        {/*<Button onClick={leftMove} icon={<SwapRightOutlined/>}></Button>*/}
                    {/*</Row>*/}
                    {/*<Divider/>*/}
                    {/*<Row justify="center">*/}
                        {/*<Button onClick={rightMove} icon={<SwapLeftOutlined/>}></Button>*/}
                    {/*</Row>*/}


                {/*</Col>*/}
                {/*<Col span={10}>*/}
                    {/*<div className="demo-infinite-container">*/}
                    {/*<ul className="right-selected">*/}
                        {/*{*/}
                            {/*checkedItems.map((ele, index) => {*/}
                                {/*return (*/}
                                    {/*<li key={index} onClick={() => rightItemClick(index)}*/}
                                        {/*className={ele.checked ? "item active" : "item"}>*/}
                                        {/*<input type="checkbox" name="checkedItems" checked={ele.checked}*/}
                                               {/*onChange={() => getSelected(index)}/>*/}
                                        {/*<label>{ele.formatMember}</label>*/}
                                    {/*</li>*/}
                                {/*)*/}
                            {/*})*/}
                        {/*}*/}
                    {/*</ul>*/}
                    {/*</div>*/}
                {/*</Col>*/}
            {/*</Row>*/}
            {/*<Divider/>*/}
            {/*<Row justify="center">*/}
                {/*<Button>确定</Button>*/}
                {/*<Button onClick={this.closeMultiChoiceWin}>关闭</Button>*/}
            {/*</Row>*/}

        </>

        );






}

export  default  forwardRef(MultiChoice);

